import React, { Component } from 'react';
import './Cate.scss'
import { Skeleton } from 'antd-mobile'
import { category_list, category_subcate } from '../../utils/api'
import { SearchOutline } from 'antd-mobile-icons'
class Cate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: [],
            arr2: [],
            currentIndex: 0
        }
    }
    componentDidMount() {
        category_list().then((res) => {
            if (res.data.code == 200) {

                this.setState({ arr: res.data.list })
            }
        })

        category_subcate({ id: 225510 }).then((res) => {
            if (res.data.code == 200) {
                console.log('Cate请求的数据', res.data)
                this.setState({ arr2: res.data.subcate.subcategory })
            }
        })


    }
    render() {
        return (
            <div>
                <div className="title">
                    <h3>分类</h3>
                    <div className="inputbox">
                        <SearchOutline fontSize={18} />
                        {/* input搜索框 */}
                        <input type="text" placeholder='搜索店铺内商品' onClick={() => { this.props.history.push({ pathname: '/index/allgood', state: { goodid: 281462 } }) }} />
                        {/* input搜索框 */}
                    </div>
                </div>
                <div className="tabs">
                    <div className="left">
                        {
                            this.state.arr.map((element, index) => {
                                return (
                                    <div className={`dv ${this.state.currentIndex === index ? "active" : ''}`} key={element.id} onClick={() => { this.handleClik(element.id, index) }}>{element.name}</div>
                                )
                            })
                        }
                    </div>
                    <div className="right">
                        {
                            //请求返回商品列表前, 显示骨架屏
                            this.state.arr2.length == 0 ?
                                <>
                                    <Skeleton.Title animated />
                                    <Skeleton.Paragraph lineCount={5} animated />
                                </> :
                                this.state.arr2.map((element) => {
                                    return (
                                        <div className="box_xi" key={element.id}>
                                            <h4>{element.name}</h4>
                                            <div className="sub">
                                                {
                                                    element.subNavs.map((element) => {
                                                        return (
                                                            <div className="img" key={element.id} onClick={() => { this.props.history.push({ pathname: '/index/allgood', state: { goodid: element.id } }) }}>
                                                                <img src={element.pic} alt="" />
                                                                <p>{element.name}</p>
                                                            </div>
                                                        )
                                                    })
                                                }
                                            </div>

                                        </div>
                                    )
                                })
                        }
                    </div>
                </div>
            </div>
        );
    }

    handleClik(item, index) {
        this.setState({ currentIndex: index })
        category_subcate({ id: item }).then((res) => {
            if (res.data.code == 200) {
                this.setState({ arr2: res.data.subcate.subcategory })
            }
        })
    }
}

export default Cate;